<!-- 
  * Copyright (c) 2022 iSoftStone Information Technology (Group) Co.,Ltd.
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
  *
  *     http://www.apache.org/licenses/LICENSE-2.0
  *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
 -->
<template>
	<view>
		<view class="main-area" style="display: flex;" v-for="(item,index) in list" :key="index"
			@click="gotoCourse(item)">
			<view class="avatarUrl">
				<u-image :src="item.imageUrl" width="120px" height="72px"></u-image>
			</view>
			<view class="list-content">
				<span class="title">{{item.name}}</span>
				<span class="content">{{item.address}}</span>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: Array,
			type: String
		},
		data() {
			return {
			}
		},
		computed: {

		},
		onLoad: function() {
			
		},

		methods: {
			gotoCourse(item){
				this.$emit("change",item)
				
			}
			
		}
	}
</script>

<style>
	
</style>

<style lang="scss" scoped>
	.main-area {
		// height: 96px;
		background: #FFFFFF;
		margin-top: 16rpx;
		//display: fixd;
		flex-direction: row;
		// flex-wrap:  wrap;
	}

	.avatarUrl {
		padding: 24rpx 0 24rpx 24rpx;
	}

	.title {
		width: 400rpx;
		font-size: 14px;
		color: #000000;
		font-family: HarmonyHeiTi;
		padding: 24rpx 24rpx 4rpx 32rpx;
		font-weight: bold;
		display: block;
		// flex-wrap: wrap;
	}

	.content {
		width: 400rpx;
		font-size: 24rpx;
		color: rgba(0, 0, 0, 0.5);
		font-family: HarmonyHeiTi;
		padding: 0 24rpx 0px 32rpx;
		white-space: normal;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}
</style>
